import { CaseConfigType } from '@shared';
import { BasicComponent } from './basic/basic.component';
import { SimpleComponent } from './simple/simple.component';
import { AccordionComponent } from './accordion/accordion.component';
import { LazyLoadComponent } from './lazy-load/lazy-load.component';
import { Demo5Component } from './demo5/demo5.component';
import { CustomizeComponent } from './customize/customize.component';
import { SizeComponent } from './size/size.component';
import { CustomizeIconComponent } from './customize-icon/customize-icon.component';
import { CustomizePanelClassComponent } from './customize-panel-class/customize-panel-class.component';

export const CollapseConfig: CaseConfigType = {
  location: 'collapse',
  description: '可以折叠/展开的内容区域，常用于较为复杂界面的分组布局。',
  description_en:
    'The content area that can be folded/expanded is often used in the group layout of more complex interfaces.',
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/collapse/basic/basic.component',
      demoTitle: '基础',
      demoTitle_en: 'Basic',
      demoDescription: '普通折叠面板。可根据使用场景在右侧扩展内容。',
      demoDescription_en:
        'Basic collapse. The content can be extended on the right side according to the usage scenario.',
    },
    {
      demo: SimpleComponent,
      codePath: 'showcase/collapse/simple/simple.component',
      demoTitle: '精简模式',
      demoTitle_en: 'Independently Used',
      demoDescription: '精简模式，一般用于高级配置等场景。',
      demoDescription_en: 'Lite mode is generally used in scenarios such as advanced configuration.',
    },
    {
      demo: SizeComponent,
      codePath: 'showcase/collapse/size/size.component',
      demoTitle: '尺寸',
      demoTitle_en: 'Size',
      devDebug: true,
    },
    {
      demo: AccordionComponent,
      codePath: 'showcase/collapse/accordion/accordion.component',
      demoTitle: '手风琴',
      demoTitle_en: 'Accordion',
      demoDescription: '始终只展开一个面板的内容。',
      demoDescription_en: 'Always expand the content of only one panel.',
    },
    {
      demo: LazyLoadComponent,
      codePath: 'showcase/collapse/lazy-load/lazy-load.component',
      demoTitle: '懒加载',
      demoTitle_en: 'Lazy Loading',
      demoDescription: '面板内容懒加载。',
      demoDescription_en: 'Lazy loading of panel content.',
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/collapse/demo5/demo5.component',
      demoTitle: '展开事件',
      demoTitle_en: 'Event of Expansion',
      demoDescription: '在折叠面板展开前后的事件处理。',
      demoDescription_en: 'Event handling before and after showing the collapsible elements.',
    },
    {
      demo: CustomizeIconComponent,
      codePath: 'showcase/collapse/customize-icon/customize-icon.component',
      demoTitle: '自定义图标',
      demoTitle_en: 'Custom Icon',
      devDebug: true,
    },
    {
      demo: CustomizeComponent,
      codePath: 'showcase/collapse/customize/customize.component',
      demoTitle: '自定义面板',
      demoTitle_en: 'Custom panel',
      demoDescription: 'title和扩展区域是否可展开面板。',
      demoDescription_en: 'Custom title and expansion area to expand the panel.',
    },
    {
      demo: CustomizePanelClassComponent,
      codePath: 'showcase/collapse/customize-panel-class/customize-panel-class.component',
      demoTitle: '自定义面板class',
      demoTitle_en: 'Custom panel class',
      demoDescription: '支持面板灵活排版。如：左对齐',
      demoDescription_en: 'Supports flexible panel typesetting. For example, align left.',
    },
  ],
  useRule: [],
  useSuggestion: [],
  snippet: `
    <lv-collapse>
      <lv-collapse-panel [lvTitle]="\${1:'Panel 001'}">
        \${2:This is content...}<br />
      </lv-collapse-panel>
      <lv-collapse-panel [lvTitle]="\${3:'Panel 002'}">
        \${4:This is content...}<br />
      </lv-collapse-panel>
    </lv-collapse>
	`,
  mApi: [
    {
      selector: 'lv-collapse',
      name: 'lv-collapse',
      name_en: 'lv-collapse',
      api: [
        {
          attribute: 'lvType',
          type: 'string',
          default: 'default',
          description: "类型，可选值： 'default' | 'simple'。",
          description_en: "Type. Optional value: 'default' | 'simple'.",
        },
        {
          attribute: 'lvSize',
          type: 'string',
          default: 'default',
          description: "大小，可选值： 'default' | 'large'。",
          description_en: "Size. Optional value: 'default' | 'simple'.",
        },
        {
          attribute: 'lvPanelClass',
          type: 'string',
          default: 'null',
          description: '面板自定义class',
          description_en: 'Panel custom class',
        },
        {
          attribute: 'lvMultiExpansion',
          type: 'boolean',
          default: 'true',
          description: '是否支持多个展开，默认可展开多个。',
          description_en:
            'Whether to support showing muitiple elements. It is available to expand multiple panel bu default.',
        },
        {
          attribute: 'lvBeforeExpanded',
          type: 'fn',
          default: '--',
          description:
            '展开面板前的回调函数，参数为当前面板实例，支持可执行函数、Promise、Observe，返回 false 时可阻止面板打开。',
          description_en:
            'Callback funtion before expanding the panel. Parameter is the instance of current panel, which supports executable functions, Promise and Observe. Panel can be prevented from expanding when False is returned.',
        },
        {
          attribute: 'lvAfterExpanded',
          type: 'fn',
          default: '--',
          description: '展开面板后的回调函数，参数为当前面板实例。',
          description_en: 'Callback funtion after expanded the panel. Parameter is the instance of current panel.',
        },
        {
          attribute: 'lvBeforeCollapsed',
          type: 'fn',
          default: '--',
          description:
            '收起面板前的回调函数，参数为当前面板实例，支持可执行函数、Promise、Observe，返回 false 时可阻止面板收起。',
          description_en:
            'Callback funtion before collapse the panel. Parameter is the instance of current panel, which supports executable functions, Promise and Observe. Panel can be prevented from collapse when False is returned.',
        },
        {
          attribute: 'lvAfterCollapsed',
          type: 'fn',
          default: '--',
          description: '收起面板后的回调函数，参数为当前面板实例。',
          description_en: 'Callback funtion after collapsed the panel. Parameter is the instance of current panel.',
        },
      ],
      event: [],
    },
    {
      selector: 'lv-collapse-panel',
      name: 'lv-collapse-panel',
      name_en: 'lv-collapse-panel',
      api: [
        {
          attribute: 'lvId',
          type: 'string',
          default: 'null',
          description: '唯一标识符 id 。',
          description_en: 'Unique identifier id.',
        },
        {
          attribute: 'lvTitle',
          type: 'string | TemplateRef',
          default: 'Title',
          description: '面板的标题，支持字符串或模板。',
          description_en: 'Title of the panel, which supports string and template.',
        },
        {
          attribute: 'lvExtra',
          type: 'string | TemplateRef',
          default: 'null',
          description: "面板标题区域右侧可扩展内容，支持字符串或模板。注：'lvType' 为 simple 时，lvExtra无效。",
          description_en:
            'Extensible content on the right side of collapse panel title, which supports string or template. Note: If lvType is set to simple, lvExtra is invalid.',
        },
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: '是否禁用当前面板。',
          description_en: 'Whether to disable the current panel.',
        },
        {
          attribute: 'lvLoading',
          type: 'boolean',
          default: 'false',
          description: '面板的加载状态。',
          description_en: 'Loading status of the panel.',
        },
        {
          attribute: 'lvExpanded',
          type: 'boolean',
          default: 'false',
          description: '面板的展开状态。',
          description_en: 'Collapsing status of the panel.',
        },
        {
          attribute: 'lvExpandedIcon',
          type: 'string | TemplateRef',
          default: 'null',
          description: '面板的切换图标。',
          description_en: 'The switch icon of the panel.',
        },
      ],
      event: [],
    },
  ],
};
